<template>
  <view class="product-item-wrapper">
    <view class="logo-box" v-if="item.iconsPic">
      <image :src="item.iconsPic" class="logo-img" />
    </view>
    <view class="logo-box default" v-else>
      <image :src="defaultImg" class="logo-img" />
    </view>
    <view class="right-content">
      <view class="title">{{ item.commodityName }}</view>
      <view class="desc">{{ item.profiles }}</view>
      <view class="footer">
        <view class="left">
          <view class="dis" v-if="item.discount">{{item.discount}}折</view>
          <view class="price-row">
            <view class="price">¥ {{ item.reductions || item.price }}</view>
            <view class="old-price">¥ {{ item.price }}</view>
          </view>
        </view>
        <view class="options">
          <view class="minus option-btn" v-if="value > 0" @tap="minus">
            <image :src="minusImg" class="op-img" />
          </view>
          <view class="count" v-if="value > 0">{{ value }}</view>
          <view class="plus option-btn" @tap="add">
            <image :src="addImg" class="op-img" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import minusImg from "@/static/icons/minus.svg";
  import addImg from "@/static/icons/add.svg";
  import defaultImg from "@/static/icons/default-icon.svg";

  const props = defineProps({
    value: {
      type: Number,
      default: () => 0
    },
    step: {
      type: Number,
      default: 1
    },
    item: {
      type: Object,
      default: () => {}
    }
  });
  const $emit = defineEmits(['onChange']);

  const minus = () => {
    if (props.value > 0) {
      $emit('onChange', props.value - props.step);
    }
  }
  const add = () => {
    $emit('onChange', props.value + props.step);
  }
</script>
<style lang="scss" scoped>
.product-item-wrapper {
  display: flex;
  justify-content: space-between;
  .logo-box {
    width: 160upx;
    height: 160upx;
    border-radius: 10upx;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo-img {
      width: 160upx;
      height: 160upx;
    }
    &.default {
      border: 1upx solid #dbdbdb;
      .logo-img {
        width: 100upx;
        height: 100upx;
      }
    }
  }
  .right-content {
    flex: 1;
    margin-left: 20upx;
    .title {
      color: #30302F;
      text-align: left;
      font-size: 34upx;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
    .desc {
      margin-top: 4upx;
      color: #7D7D7D;
      text-align: left;
      font-size: 24upx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
    .dis {
      padding: 2upx 16upx;
      box-sizing: border-box;
      border: 1upx solid #FF4D56;
      border-radius: 8upx;
      margin-top: 4upx;

      color: #FF4D56;
      text-align: center;
      font-size: 20upx;
      font-style: normal;
      font-weight: 600;
      line-height: 28upx;
    }
    .price {
      color: #FF4D56;
      font-size: 28upx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
    .old-price {
      color: #BEBEBE;
      font-size: 28upx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      text-decoration: line-through;
      margin-left: 30upx;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .price-row {
          display: flex;
          justify-content: flex-start;
          align-items: flex-end;
          margin-top: 4upx;
        }
      }
      .options {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .option-btn {
          width: 60upx;
          height: 60upx;
          border-radius: 50%;
          background-color: #FF4D56;
         
          display: flex;
          justify-content: center;
          align-items: center;
          .op-img {
            width: 32upx;
            height: 32upx;
          }
        }
        .options-img {
          width: 42upx;
          height: 42upx;
          background-color: #FF4D56;
          color: #fff;
        }
        .count {
          width: 60upx;
          text-align: center;
          font-size: 28upx;
          font-style: normal;
          font-weight: 600;
          line-height: 42upx;
        }
      }
    }
  }
}
</style>